{layout name="layout" /}
<style media="screen">
  .pay{
    padding:10px;background:rgba(191, 189, 189, 0.35);margin-top:15px;
  }
  nav ul a:hover {
    background-color: rgba(0, 0, 0, 0);
  }
</style>
  <div class="navbar-fixed  black-text text-darken-2" style="width:100% !important">
    <nav class="white black-text text-darken-2" role="navigation">
      <div class="nav-wrapper container">
        <a id="logo-container" style="font-size:16px;" href="#!" class="brand-logo center black-text text-darken-2">支付您的订单</a>



        <ul class="left">
            <li><a  class="black-text text-darken-2" href="http://cosgoal.com/my/orders" style="margin-left:-15px">
              <img src="http://cosgoal.com/img/goback.png" style="width:55%;height:auto;margin-top: 20px;" alt="">
            </a></li>
          </ul>


      </div>
    </nav>

  </div>


<div class="" style="width:100%;height:auto;">
  <div class="container " id='order_inbox' style="position:relative;margin-top:10px">
    <img src="http://cosgoal.com/img/ordersbg.png" style="width:100%;height:auto" alt="">
    <div class="row" style="marign-bottom:0px;position:absolute;margin-top:-45%;margin-left:15px;width:90%;">
    <div class="col s12" style="padding:10px">
      订单号：{$order.out_trade_no}
    </div>
    <div class="col s12" style="padding:10px;border-top:1px solid rgba(191, 189, 189, 0.70);border-bottom:1px solid rgba(191, 189, 189, 0.70)">
      购买的商品：{$order.product_name} ✕ {$order.product_count}
    </div>
    <div class="col s12" style="padding:10px">
      总计：{$order.total}
    </div>
    </div>
  </div>

  <div  style="width:140px;border-top-right-radius:30px;border-bottom-right-radius:30px;display:block;height:30px;line-height:30px;background:#ffcf2d;color:white;margin-top:10px;padding-left:5px">请选择支付方式</div>


  <div id="modal1" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4>扫码支付</h4>
    <div class="">
        {{> QrCode text=qr_url }}
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
  </div>
</div>

  <form class="">


  <ul class="collapsible" data-collapsible="accordion" style="border:none">
    <li >
      <div class="col s12 collapsible-header pay">
        <input class="with-gap" name="group1" type="radio" id="wxMpBtn"  />
        <label for="wxMpBtn" style="width:100%;height:100%"><div class="">
        <img src="http://cosgoal.com/img/orders1.png" style="width:auto;height:20px;" alt="" >微信支付</div></label>
      </div>
    <div class="row">
    </div>
  </li>
  <li>
    <!-- <div id="web_wechat_pay" class="btn btn-primary">
      微信支付
    </div> -->
  </li>

</ul>




    </form>
</div>
<div class="" style="width:100%;height:60px">

</div>

<script type="text/javascript">
$(document).ready(function(){
  document.title = "万人车汇黑卡支付";
  $('#modal1').modal();
  $('.collapsible').collapsible();
  $(".lab3").click(function(){
    $(".l1").click();
  });
  

});
</script>

<script type="text/javascript">

function urlencode (str) {  
    str = (str + '').toString();   

    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').  
    replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');  
}

//微信公众号支付
$("#wxMpBtn").click(function(){
  if (typeof('WeixinJSBridge') == "undefined"){
     if( document.addEventListener ){
         document.addEventListener('WeixinJSBridgeReady', callMpPay, false);
     }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', callMpPay); 
       document.attachEvent('onWeixinJSBridgeReady', callMpPay);
     }
  }else{
    callMpPay();
  }
});

//ajax请求支付
function callMpPay(){
  var driver = '{$method.driver}';
  var gateway = '{$method.gateway}';
  var pdata = '{$pdata}';

  $.ajax({
    type:'GET',
    dataType:'json',
    url:'/pay/s?driver='+driver+'&gateway='+gateway+'&pdata='+pdata,
    success:function(result){
      var jsApiParameters = jQuery.parseJSON(result);
      wxJsApiCall(jsApiParameters);
    }
  });
}

//调用微信JSAPI支付
function wxJsApiCall(jsApiParameters){
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest',{
       "appId":jsApiParameters.appId,     //公众号名称，由商户传入     
       "timeStamp":jsApiParameters.timeStamp,         //时间戳，自1970年以来的秒数     
       "nonceStr":jsApiParameters.nonceStr, //随机串     
       "package":jsApiParameters.packages,     
       "signType":jsApiParameters.signType,         //微信签名方式：     
       "paySign":jsApiParameters.paySign, //微信签名 
    },
    function(res){
      var back_url = "http://cosgoal.com/orders/pay/duy5JcwsWw6hkQJaR/payback/success";

      if(res.err_msg == "get_brand_wcpay_request:ok"){ //支付成功
        back_url = "http://cosgoal.com/orders/pay/duy5JcwsWw6hkQJaR/payback/success";

      } else if(res.err_msg == "get_brand_wcpay_request:cancel"){ //支付过程中用户取消
        back_url = "http://cosgoal.com/orders/pay/duy5JcwsWw6hkQJaR/payback/canceled";

      } else if(res.err_msg == "get_brand_wcpay_request:fail"){ //支付失败
        back_url = "http://cosgoal.com/orders/pay/duy5JcwsWw6hkQJaR/payback/failed";

      }

      window.location.assign(back_url);
    }
  );
}

</script>
